import React, { Component } from 'react';
import Hashs from 'jshashes';
import { Card, Form, Button, Input, Switch } from 'antd';
import { connect } from 'dva';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getToken } from '../../utils/authority';
import { message } from 'antd';

const FormItem = Form.Item;

@connect(({ user }) => ({
  user,
}))
@Form.create()
export default class ResetPwd extends Component {
  state = {
    isEasy: 0,
  };
  componentDidMount() {}
  onChange = value => {
    this.state.isEasy = value;
  };
  handleConfirmPassword = (rule, value, callback) => {
    const { getFieldValue } = this.props.form;
    if (value && value !== getFieldValue('newPassword')) {
      callback('两次输入不一致！');
    }

    // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
    callback();
  };
  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const token = getToken();
        const safeGrade = values.safeGrade ? 2 : 0;
        const newPassword = new Hashs.SHA1().hex(values.newPassword);
        const oldPassword = new Hashs.SHA1().hex(values.oldPassword);
        const params = { newPassword, oldPassword, safeGrade };
        //console.log('Received values of form: ', params);
        this.props.dispatch({
          type: 'user/resetPwd',
          payload: { ...params },
          callback: () => {
            message.success('密码修改成功！');
          },
        });
      }
    });
  };

  render() {
    const { submitting, form } = this.props;
    const { getFieldDecorator } = form;
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 20, offset: 0 },
        sm: { span: 10, offset: 5 },
      },
    };

    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <Form style={{ marginTop: 8 }}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 5 }} label="原密码">
              {getFieldDecorator('oldPassword', {
                rules: [{ required: true, message: '请输入原密码...' }],
              })(<Input type="password" placeholder="请输入原密码..." />)}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 5 }} label="新密码">
              {getFieldDecorator('newPassword', {
                rules: [
                  {
                    required: true,
                    message: form.getFieldValue('safeGrade')
                      ? '密码不符合要求，需要6-20位数字，字母，符号的组合'
                      : '密码不符合要求, 简单密码必须全为字符',
                    pattern: form.getFieldValue('safeGrade')
                      ? RegExp(
                          '^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{6,20}$'
                        )
                      : RegExp('(^[0-9]d+$)|(^[a-z]+$)|(^[A-Z]+$)'),
                  },
                ],
              })(<Input type="password" placeholder="请输入新密码..." />)}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 5 }} label="确认密码">
              {getFieldDecorator('confirmPassword', {
                rules: [
                  {
                    required: true,
                    message: '请再次输入以确认新密码',
                  },
                  {
                    validator: this.handleConfirmPassword,
                  },
                ],
              })(<Input type="password" placeholder="请再次输入新密码..." />)}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 5 }} label="强密码">
              {getFieldDecorator('safeGrade', { valuePropName: 'checked', initialValue: true })(
                <Switch />
              )}
            </FormItem>
            <FormItem {...submitFormLayout}>
              <Button
                type="primary"
                htmlType="submit"
                onClick={this.handleSubmit}
                loading={submitting}
              >
                确定提交
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
